<template>
  <div class="news">
    <h3>最新新闻</h3>
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <button @click="showNewsDetail(news)">查看新闻</button>
         <RouterLink  
         :to="{
          name:'detail',//params只能用name，不能用path。
          query:{
            id:news.id,
            title:news.title,
            summary:news.summary
          }
        }"
         >
         {{news.title }}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
     <div class="news-content">
      <RouterView></RouterView>
     </div>
  </div>
</template>

<script lang="ts" setup name="News">
import { reactive, ref } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router';

const newsList = reactive([
  {
    id: 'asfdrfay01',
    title: 'Vue3 3.4版本发布',
    summary: 'Vue3发布了最新的3.4版本，带来了更好的性能和开发体验。'
  },
  {
    id: 'asfdrfay02',
    title: 'TypeScript 5.3更新',
    summary: 'TypeScript发布了5.3版本，新增了多项功能和性能优化。'
  },
  {
    id: 'asfdrfay03',
    title: '前端开发趋势',
    summary: '2024年前端开发的主要趋势包括AI辅助编程、WebAssembly等。'
  }
])

interface newsInter{
  id:string
  title:string,
  summary:string,
}

const router = useRouter()
function showNewsDetail(news:newsInter){
  router.push({
    name:'detail',//params只能用name，不能用path。
          query:{
            id:news.id,
            title:news.title,
            summary:news.summary
          }
  })
}
</script>

<style scoped>

</style>
